<template>
	<view class="NFR_record">
		<view class="nav">
			<view class="nav_box" :class="changeIndex==index?'nav_box_active':''" v-for="(item,index) in navList"
				:key="index" @click="changeNav(index)">
				<text>{{item.value}}</text>
				<view class="nav_line" v-if="changeIndex==index"></view>
			</view>
		</view>
		<view class="nfr_box">
			<view class="nfr_item" v-for="(item,index) in dataList" :key="index">
				<view class="item_title">
					<view class="t_01">{{item.cardName}}</view>
					<view class="t_02">编码{{item.cardNo}}</view>
				</view>
				<view class="item_main">
					<block v-if="changeIndex==0">
						<view class="main_li">
							<view class="li_01">接收地址：</view>
							<view class="li_02">{{item.toCustomerAddress}}</view>
						</view>
						<view class="main_li">
							<view class="li_01">接收哈希：</view>
							<view class="li_02">{{item.voucher}}</view>
						</view>
						<view class="main_li">
							<view class="li_01">接收账户：</view>
							<view class="li_02">{{item.toCustomerPhone}}</view>
						</view>
						<view class="main_li">
							<view class="li_01">接收用户：</view>
							<view class="li_02">{{item.toCustomerName}}</view>
						</view>
					</block>
					<block v-if="changeIndex==1">
						<view class="main_li">
							<view class="li_01">转出地址：</view>
							<view class="li_02">{{item.fromCustomerAddress}}</view>
						</view>
						<view class="main_li">
							<view class="li_01">转出哈希：</view>
							<view class="li_02">{{item.voucher}}</view>
						</view>
						<view class="main_li">
							<view class="li_01">转出账户：</view>
							<view class="li_02">{{item.fromCustomerPhone}}</view>
						</view>
						<view class="main_li">
							<view class="li_01">转出用户：</view>
							<view class="li_02">{{item.fromCustomerName}}</view>
						</view>
					</block>
					<view class="main_li">
						<view class="li_01">订单编号：</view>
						<view class="li_02">{{item.donationNo}}</view>
					</view>
					<view class="main_li">
						<view class="li_01">接收状态：</view>
						<view class="li_02" v-if="item.status == 1">已完成</view>
						<view class="li_02" v-else-if="item.status == 2">转赠中</view>
						<view class="li_02" v-else-if="item.status == 3">转赠失败</view>
					</view>
					<view class="main_li">
						<view class="li_02">{{item.createTime}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no_info" v-if="dataList.length == 0">
			<image src="/static/my/news_no.png" mode="widthFix"></image>
			<text>暂无记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				changeIndex: 0,
				navList: [{
					id: '1',
					value: '我的转出'
				}, {
					id: '2',
					value: '我的获赠'
				}, ],
				dataList: [],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				type:1,
			}
		},
		onLoad() {
			this.getDonationRecordList()
		},
		methods: {
			changeNav(index) { //类型选择
				this.changeIndex = index
				this.pageNum = 1
				if (index == 0) { //
					this.type = 1
					this.getDonationRecordList()
				} else if (index == 1) { //
					this.type = 2
					this.getDonationRecordList()
				}
			},

			async getDonationRecordList() {
				uni.showLoading({
					title: '加载中'
				})
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					type: this.type
				}
				try {
					const res = await this.$api.getDonationRecordList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}

			}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getDonationRecordList()
			}
		}
	}
</script>

<style scoped>
	page {
		background: #FCFCFD;
		width: 100%;
		height: 100%;
	}

	.nav {
		display: flex;
		box-sizing: border-box;
	}

	.nav_box {
		padding-top: 22rpx;
		height: 88rpx;
		background-color: #fff;
		font-size: 32rpx;
		color: #555555;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
        align-items: center;
		width: calc(100% / 2);
		box-sizing: border-box;
	}

	.nav_line {
		width: 60rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 20rpx;
		/* margin-top: 20rpx; */
	}

	.nav_box_active {
		font-size: 32rpx;
		color: #222222;
		font-weight: 600;
	}
    .coin_nav{
    	width: 100%;
    	height: 40rpx;
    	background: #fff;
        height: 88rpx;
        display: flex;
        justify-content: space-between;
    }
    .coin_navList{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 22rpx;
    }
    .coin_navList text{
        font-size: 32rpx;
        color: #555;
    }
    .coin_navList .bor{
        width: 60rpx;
        height: 6rpx;
        border-radius: 10px;
        margin-top: 16rpx;
    }
    .coin_navList .avtive{
        background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
    }
    .coin_navList .hei{
        color: #222;
        font-weight: bold;
    }
	.nfr_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 60rpx;
	}

	.nfr_item {
		word-break: break-all;
		width: 690rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0px 8rpx 16rpx #EAEAEA;
		border-radius: 32rpx;
		margin-bottom: 30rpx;
	}

	.item_title {
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.item_title .t_01 {
		max-width: 460rpx;
		color: #222222;
		font-weight: bold;
	}

	.item_main {
		padding-top: 30rpx;
	}

	.main_li {
		display: flex;
		flex-direction: row;
		font-size: 26rpx;
		color: #6B6B6B;
		margin-bottom: 14rpx;
	}

	.main_li .li_01 {
		width: 140rpx;
	}

	.main_li .li_02 {
		width: 240px;
	}
</style>
